import { createBrowserRouter, redirect } from 'react-router-dom'

import Layout from '../pages/Layout'
import Login from '../pages/Login'
// 引入首页、文章列表、发布文章
// import Home from '../pages/Home'
// import Article from '../pages/Article'
// import Publish from '../pages/Publish'
import { lazy, Suspense } from 'react'
// 导入高阶组件（路由守卫）
import { AuthRoute } from '../components/AuthRoute'

// 1. 使用lazy动态导入组件
const Home = lazy(() => import('../pages/Home'))
const Article = lazy(() => import('../pages/Article'))
const Publish = lazy(() => import('../pages/Publish'))

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <AuthRoute>
        <Layout />
      </AuthRoute>
    ),
    children: [
      {
        index: true,
        loader: () => {
          return redirect('/home')
        }
      },
      {
        path: 'home',
        element: (
          <Suspense fallback="正在加载中...">
            <Home />
          </Suspense>
        )
      },
      {
        path: 'article',
        element: (
          <Suspense fallback="正在加载中...">
            <Article />
          </Suspense>
        )
      },
      {
        path: 'publish',
        element: (
          <Suspense fallback="正在加载中...">
            <Publish />
          </Suspense>
        )
      }
    ]
  },
  {
    path: '/login',
    Component: Login
  }
])

export default router
